<template>
  <dv-border-box-7 id="left-row-up-chart">
    <div class="container-tittle">产线产能</div>
    <div class="left-row-up-chart-title">
      当日生产总量:
      <dv-digital-flop :config="config1" style="width: 200px; height: 50px" />
    </div>
    <div class="left-row-up-chart-title">
      产线累计生产数量:
      <dv-digital-flop :config="config2" style="width: 200px; height: 50px" />
    </div>
    <!-- <div class="left-row-up-chart-title">当前订单完成情况:</div>
    <dv-water-level-pond :config="config" class="water-level-chart" /> -->
  </dv-border-box-7>
</template>
<script>
import * as echarts from "echarts";
import Axios from "axios";
export default {
  name: "leftRowUpChart",
  data() {
    return {
      config1: {
        number: [60],
        content: "{nt}    件",
      },
      config2: {
        number: [9999],

        content: "{nt}    件",
      },
    };
  },
  methods: {
    async UpdateData() {
      var _this = this;
      // var url = this.$baseUrl + "order/current-progress";
      // await Axios.get(url).then(
      //   (response) =>
      //     (_this.config = {
      //       data: [response.data],
      //       shape: "roundRect",
      //       waveHeight: 25,
      //       waveNum: 2,
      //     })
      // );

          var url1 = this.$baseUrl + "statistics/day-product";
        await  Axios.get(url1).then(
            (response) =>
              (_this.config1 = {
                number: [response.data],

                content: "{nt}    件",
              })
          );

          var url2 = this.$baseUrl + "statistics/all-product";
       await  Axios.get(url2).then(
            (response) =>
              (_this.config2 = {
                number: [response.data],
                content: "{nt}    件",
              })
          );
    },
  },
  //mounted 放到Method外面
  //排查接口问题
  mounted() {
    const { UpdateData } = this;

    this.UpdateData();

     setInterval(this.UpdateData, 5000)
  },
};
</script>
<style lang="less">
#left-row-up-chart {
  width: 100%;
  height: 28%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  margin: 20px;
}
.container-tittle{
   font-size: 20px;
    display: flex;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;
}
.left-row-up-chart-title {
  font-weight: bold;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 20px;
  justify-content: space-around;
  margin-top:10%;
}
.water-level-chart {
  width: 40%;
  height: 40%;
  display: flex;
  margin: 0 auto;
}
</style>
